<template>
  <div class="index">
    <div class="title"><span>广道网络行为安全管理平台</span></div>
    <div class="content">
      <div class="image"></div>
      <div class="loginInput">
        <div class="welcome">欢迎登录</div>
        <ul>
          <div v-show="noLoginUser"><Alert type="warning" show-icon>请输入用户名！</Alert></div>
          <div v-show="noLoginPas"><Alert type="warning" show-icon>请输入密码！</Alert></div>
          <div v-show="logining"><Alert>登录中，请稍后！</Alert></div>
          <div v-show="success"><Alert type="success" show-icon>登录成功！</Alert></div>
          <div v-show="other"><Alert type="error" show-icon>登录失败，请稍后重试！</Alert></div>
          <div v-show="noUser"><Alert type="error" show-icon>未注册用户！</Alert></div>
          <div v-show="errPas"><Alert type="error" show-icon>登录失败，密码错误！</Alert></div>
          <li>
            <div><Icon style="font-size:28px" type="person"/></div>
            <input v-model="loginUser" type="text" placeholder="请输入账号">
          </li>
          <li>
            <div><Icon style="font-size:28px" type="ios-unlocked" /></div>
            <input v-model="loginPwd" type="password" placeholder="请输入密码">
          </li>
          <li class="subBtn">
            <input  type="button" class="loginbtn btn btn-primary" @click="login()" value="登录"/>
            <label>
              <input type="checkbox" checked="checked" />
              记住密码
            </label>
            <label style="float:right">忘记密码？</label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      loginUser: '',
      loginPwd: '',
      success: false,
      noUser: false,
      errPas: false,
      other: false,
      logining: false,
      noLoginUser: false,
      noLoginPas: false
    }
  },
  methods: {
    login () {
      this.success = false
      this.noUser = false
      this.errPas = false
      this.other = false
      this.logining = false
      this.noLoginUser = false
      this.noLoginPas = false
      if(this.loginUser === ''){
        this.noLoginUser = true
        return
      }
      if(this.loginPwd === ''){
        this.noLoginPas = true
        return
      }
      // 开发使用
      if(this.loginUser === 'root' && this.loginPwd === '123456'){
        let name = localStorage.setItem('adminName', this.loginUser)
        let password = localStorage.setItem('adminPassword', this.loginPwd)
        this.$router.replace('/')
        return
      } 

      this.logining = true
      let name = localStorage.setItem('adminName', this.loginUser)
      let password = localStorage.setItem('adminPassword', this.loginPwd)
      this.http.get('/account/login/verify',{
        params: {
          name: this.loginUser,
          password: this.loginPwd
        }
      })
      .then((response) => {
        console.log(response)
        let data = response.data
        if(data.code === 200) {
          this.logining = false
          this.success = true
          this.$router.replace('/')
        } else if(data.code === 1003){
          this.logining = false
          this.errPas = true
        } else if(data.code === 1004){
          this.logining = false
          this.noUser = true
        } else {
          this.logining = false
          this.other = true
        }
      })
      .catch((error) => {
        console.log(error)
        this.logining = false
        this.other = true
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/css" scoped >
.index{
  background: #292f41;
  position: fixed;
  height:100%;
  width: 100%;
}
.title{
  height:100px;
  width: 100%;
  background:#101010;
  text-align: center;
  line-height: 100px;
  font-size: 32px;
  color:white;
  word-spacing:12px;
  letter-spacing: 12px;
}
.content{
  width:1200px;
  height:600px;
  margin: 100px auto;
  border:1px solid black;
}
.content{
   box-shadow:2px 2px;
   border:1px solid black;
  .image{
    width:600px;
    height:600px;
    background: url('/static/images/login_bg.png') no-repeat;
    float: left;
  }
  .loginInput{
    width:598px;
    height:600px;
    float: right;
    padding-top:150px;
    background:white;
    border-top-right-radius:5px;
　　border-bottom-right-radius:5px;
    .welcome{
      text-align:center;
      font-size: 36px;
      word-spacing:5px;
      letter-spacing: 5px;
      font-family: 'kaiti'
    }
    ul {
      padding:60px;
      padding-top:40px;
      li{
        height:60px;
        border-bottom:1px solid #a9b6c0;
        div{
          width: 60px;
          height:60px;
          float: left;
          padding:20px
        }
        input{
          width: 400px;
          height:40px;
          font-size:18px;
          padding-left: 10px;
          float: right;
          margin-top: 16px;
          border:none;
          outline:none;
        }
        .loginbtn{
          height: 40px;
          width: 480px;
          float: right;
          margin-top: 20px;
          border-radius:5px;
        }
        label{
          margin-top: 20px;
          input{
            height: 16px;
            width: 16px;
            font-size:16px;
            float: left;
            margin-right:10px;
            margin-top: 3px;
          }
          span{
            margin-left: 250px
          }
        }
      }
      .subBtn{
        border:none
      }
    }
  }
}
</style>
